<template>
  <el-dialog :visible.sync="showSearchGradeDialog" width="450px"
             @closed="handleClose" :destroy-on-close="true" :lock-scroll="false" :show-close="false" top="19vh">
    <!-- 搜索表单 -->
    <el-form :model="searchGradeForm" label-width="77px" class="ele-form-search"
             @keyup.enter.native="$refs.classDatabase.reload()" @submit.native.prevent>
      <el-row>
        <el-col :span="12">
          <el-form-item label="级别：" prop="school_year">
            <el-select v-model="searchGradeForm.school_year" placeholder="请选择级别" class="ele-block" clearable>
              <el-option
                  v-for="item in schoolYears"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学部：" prop="dept_type">
            <el-select v-model="searchGradeForm.dept_type" placeholder="请选择学部" class="ele-block" clearable>
              <el-option
                  v-for="item in deptType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="名称:">
            <el-input v-model="searchGradeForm.name" placeholder="请输入名称" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="showSearchGradeDialog=false">取消</el-button>
      <el-button type="primary" @click="query">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "SearchClass",
  data() {
    return {
      schoolYears: [], // 所有级别数据
      deptType: [], // 所有学部数据
      searchGradeForm: {},
      data: {},
      showSearchGradeDialog: this.showSearchGradeForm // 子组件不能直接修改父组件prop参数
    };
  },
  props: {
    showSearchGradeForm: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
  },
  mounted() {
    //this.query();
  },
  methods: {
    /* 查询 */
    query() {
      this.loading = true;
      this.$http.get('/classes/index', {params: this.searchGradeForm}).then(res => {
        this.loading = false;
        if (res.data.code === 200) {
          this.data = this.$util.toTreeData(res.data.result.data, 'id', 'pid');
        } else {
          this.$message.error(res.data.msg || '获取数据失败');
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    /**
     * 关闭页面
     */
    handleClose(hide) {
      if (hide) {
        hide();
      }
      this.searchGradeForm={} // 清空表单数据
      this.$emit('update:showSearchGradeForm', false)
    }
  },
  watch: {
    showSearchGradeForm(val) { // 监听该值的变化
      this.showSearchGradeDialog = val;
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}
</style>